<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理</title>
    <!-- 引入 bootstrap的 css -->
    <link type="text/css" rel="stylesheet" th:href="@{plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css}"/>
    <!-- 引入 jquery 框架，需要第一个引入，因为其他的js会使用该框架 -->
    <script type="text/javascript" th:src="@{plugins/jquery-1.12.4/jquery-1.12.4.min.js}"></script>
    <!-- 引入 bootstrap的js -->
    <script type="text/javascript" th:src="@{plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js}"></script>

    <script type="text/javascript">
        // 使用ajax进行查询操作
        function doAjaxQuery() {
            $.ajax({
                type: "POST", // 请求的类型，等价于 form 表单的 method 属性
                url: "doAjaxQuery", // 请求的服务器url，等价于 form 表单的 action 属性
                data: $("#queryForm").serialize(), // "username="+$("#username")+"&userpsw="+$("#userpsw"), 发送给服务器的数据
                success: function (data) { // 成功时的回调函数
                    // 进行业务逻辑处理，进行 dom 操作，完成页面的据图更新
                    console.log("data:::::");
                    console.log(data);
                    $("#showMsg").html(JSON.stringify(data)); // 局部刷新
                },
                error: function () {
                    alert("出错啦");
                }
            });
        }
    </script>
</head>
<body>
<!--<div class="ibox-content">-->
    <form id="queryForm" class="form-horizontal" style="padding-top: 20px;">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名：</label>
            <div class="col-sm-3">
                <input type="text" id="username" name="username" placeholder="请输入用户名" class="form-control">
                <span class="help-block m-b-none"></span>
            </div>

            <label class="col-sm-2 control-label">联系电话：</label>
            <div class="col-sm-3">
                <input type="text" id="usertel" name="usertel" placeholder="请输入联系电话" class="form-control">
                <span class="help-block m-b-none"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">地址：</label>
            <div class="col-sm-3">
                <input type="text" id="useraddress" name="useraddress" placeholder="密码" class="form-control">
            </div>

            <label class="col-sm-2 control-label">注册日期：</label>
            <div class="col-sm-3">
                <div class="col-sm-5">
                    <input type="date" placeholder="请输入开始日期" class="form-control">
                </div>
                <div class="col-sm-2">
                    &nbsp;&nbsp;-
                </div>
                <div class="col-sm-5">
                    <input type="date" placeholder="请输入结束日期" class="form-control">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-2">
                <button class="btn btn-sm btn-white" type="button" onclick="doAjaxQuery()">查询</button>
            </div>
        </div>

    </form>
<!--</div>-->
<div>
    <span id="showMsg"></span>
</div>
</body>
</html>